<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>正在开发中 - 敬请期待</title>
    <style>
      :root {
        --bg1: #f0f6ff;
        --bg2: #f7fff6;
        --card: #ffffff;
        --muted: #6b7280;
        --accent: #2563eb;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        background: linear-gradient(135deg, var(--bg1), var(--bg2));
        color: #111;
        margin: 0;
      }
      .wrap {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 16px;
      }
      .card {
        background: var(--card);
        padding: 36px;
        border-radius: 12px;
        box-shadow: 0 12px 48px rgba(31, 41, 55, 0.12);
        text-align: center;
        max-width: 840px;
        width: 100%;
        display: flex;
        gap: 24px;
        align-items: center;
      }
      .illustration {
        flex: 0 0 180px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .illustration svg {
        width: 140px;
        height: 140px;
      }
      .content {
        flex: 1;
        text-align: left;
      }
      h1 {
        font-size: 28px;
        margin: 0 0 8px;
        color: #0f172a;
      }
      p {
        color: var(--muted);
        margin: 0 0 18px;
        font-size: 16px;
      }
      .actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--accent);
        color: #fff;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
      }
      .btn.secondary {
        background: transparent;
        color: var(--accent);
        border: 1px solid rgba(37, 99, 235, 0.12);
      }
      .small-note {
        margin-top: 12px;
        color: #9ca3af;
        font-size: 13px;
      }

      /* float animation for svg */
      @keyframes floaty {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
        100% {
          transform: translateY(0);
        }
      }
      .illustration svg {
        animation: floaty 3.5s ease-in-out infinite;
      }

      /* responsive */
      @media (max-width: 720px) {
        .card {
          flex-direction: column;
          padding: 28px;
        }
        .illustration {
          order: 0;
        }
        .content {
          order: 1;
          text-align: center;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="card">
        <div class="illustration" aria-hidden>
          <!-- Simple rocket SVG illustration -->
          <svg
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
            role="img"
            aria-label="rocket"
          >
            <defs>
              <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
                <stop offset="0%" stop-color="#60a5fa" />
                <stop offset="100%" stop-color="#06b6d4" />
              </linearGradient>
            </defs>
            <g transform="translate(0,0)">
              <path
                d="M32 2c-1 0-6 3-10 7-6 6-7 12-7 13 0 1 0 2 1 2 0 0 4 1 8-1 3-1 6-1 8 1 1 1 2 1 3 1s2 0 3-1c2-2 3-3 5-5 2-2 3-4 3-5 0-1-7-11-11-14-2-1-4-2-3-2z"
                fill="url(#g1)"
              />
              <circle cx="38" cy="20" r="3" fill="#fff" opacity="0.9" />
              <path
                d="M22 42c-3 6-2 8-1 9 2 2 6 2 11 0 1 0 2 0 3-1 0 0-1-4-3-8-4-7-9-8-10-7-1 1-2 3-1 7z"
                fill="#fb923c"
              />
            </g>
          </svg>
        </div>
        <div class="content">
          <h1>正在开发中</h1>
          <p>
            我们正在打造更好的功能与体验。当前页面为占位页，敬请期待后续更新 —
            我们会持续迭代并发布更多有用的功能。
          </p>
          <div class="actions">
            <a class="btn" href="/" target="_blank" rel="noopener noreferrer">打开首页（新窗口）</a>
            <a class="btn secondary" href="#" onclick="window.close();return false;">关闭</a>
          </div>
          <div class="small-note">
            如需联系，请发送邮件到
            <a href="#">jiangtengjin@jgsu.edu.cn</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
